<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>
        <ui:composition template="../../templates/portal/template.xhtml"> 
           <ui:define name="content_left">
                    <!-- INCLUDE PROFILe LEFT MENU --> 
                    <ui:include
                        src="mini_profile.xhtml">
                    </ui:include>
                    <!-- END OF INCLUDE PROFILE -->
            </ui:define>
            <ui:define name="content_right">
                <div > 
                <h3>
                    Friends:
                </h3>
                <div>
                    <h:outputText value="#{friendsListBean.message}" rendered="#{friendsListBean.displayMessage}" styleClass="message"/>
                </div>
                <div>
                    <h:outputText value="#{friendsListBean.message}" rendered="#{friendsListBean.error}" styleClass="errorMessage" style="color: red"/>
                </div>    
                <h:form>   
                    <h:dataTable value="#{friendsListBean.loadFriends(loginBean.userID)}" var="f" border="0" cellpadding="2" cellspacing="0"  style="border:solid 1px">
                    <h:column>
                       <f:facet name="header">
                       <h:outputText value="Name"/>
                       </f:facet>
                       <h:outputText value="#{f.name}"/>                       
                    </h:column>
                    <h:column>
                       <f:facet name="header">
                       <h:outputText value="Last Name"/>
                       </f:facet>
                       <h:outputText value="#{f.lastName}"/>                       
                    </h:column>
                     <h:column>              
                        <h:commandButton action="#{friendsListBean.hugUser(f)}" value="#{msgs.hugFriend}"/>              
                    </h:column>    
                </h:dataTable>
                 <div >              
                |<h:commandLink action="#{friendsListBean.previous()}" 
                               value="#{msgs.previous}"/>|
                 <h:commandLink action="#{friendsListBean.next()}" 
                               value="#{msgs.next}"/>|
                 </div>
                </h:form>
                </div> 
                <hr class="lineBreakerSoft"/>
                <div style="search">    
                <h:form styleClass="search_form">
                                
                    <h:inputText id ="search" value="#{friendsListBean.search}"
                                 required="true"
                                 requiredMessage="Search term required"
                                 validatorMessage="Invalid name">
                        <f:validateRegex pattern="#{validation.name}"/>
                     </h:inputText>
                    <h:commandButton action="#{friendsListBean.searchUsers}" value="Search Name"/>
                    <div>
                        <h:message for="search" styleClass="errorMessage"/>
                    </div> 
                    
                
            
                <h:dataTable value="#{friendsListBean.users}" var="u" border="0" cellpadding="2" cellspacing="0"  style="border:solid 1px">
                    <h:column>
                       <f:facet name="name_header">
                       <h:outputText value="Name"/>
                       </f:facet>
                       <h:outputText value="#{u.name}"/>
                    </h:column>
                    <h:column>
                       <f:facet name="lname_header">
                       <h:outputText value="Last name"/>
                       </f:facet>
                        <h:outputText value="#{u.lastName}"/>
                    </h:column>
                    <h:column>
                      
                        <h:commandButton action="#{friendsListBean.addUser(u)}" value="#{msgs.addFriend}"/>
                      
                    </h:column>                   
                 </h:dataTable>
               </h:form>
              </div>
              <hr class="lineBreakerSoft"/>
              <div id="hugs">                  
                  <h:form  >                      
                  <ui:repeat id="hugList" value="#{friendsListBean.hugs}" var="user">
                      <ul>
                          <li>
                              <h:link value="#{user.name} #{user.lastName}" /> has hugged you.
                              
                              [<h:commandLink value="X" action="#{friendsListBean.deleteHug(user)}" alt="Delete">]                                      
                              </h:commandLink>                              
                          </li>    
                      </ul>
                  </ui:repeat>
                  </h:form>
                  
              </div>
            </ui:define>
        </ui:composition>
    </body>
</html>